<script setup>
import {onMounted, ref, watch} from 'vue'
import {UploadFilled} from "@element-plus/icons-vue";
import WangEditorView from "@/components/WangEditorView.vue";
import {ElNotification} from "element-plus";
import {baseUrl} from "@/utils/request";
import {getTypeList} from "@/api/type.js";
import {addFoodArticle} from "@/api/food.js";

const uploadUrl = ref(baseUrl + '/file/upload')
const form = ref({})
const typeList = ref([])

const handleSubmit = () => {
  console.log(form.value)
  addFoodArticle(form.value).then(response => {
    ElNotification({
      title: '发布成功',
      message: '文章发布成功',
      type:'success'
    });
    form.value = {}
  }).catch(error => {
    console.log(error);
    ElNotification({
      title: '发布失败',
      message: '文章发布失败',
      type: 'error'
    });
  })
}

const handleSuccess = (response) => {
  if (response) {
    console.log(response);
    form.value.imageUrl = response.data;
    console.log(form.value.imageUrl);
    ElNotification({
      title: '上传成功',
      message: '图片上传成功',
      type:'success'
    });
  }
};

const handleError = (error) => {
  console.log(error);
  ElNotification({
    title: '上传失败',
    message: '图片上传失败',
    type: 'error'
  });
}

const getTypeListHandler = () => {
  getTypeList().then(response => {
    typeList.value = response.data
  });
}

onMounted(() => {
  getTypeListHandler()
})

// 监听 form.bankuai 的变化
watch(
    () => form.value.bankuai,
    (newVal, oldVal) => {
      if (form.value.type) {
        delete form.value.type;
      }

    }
);

</script>

<template>
  <div class="add-article">
    <el-row>
      <el-col :span="14" :offset="5">
        <div class="add-article-item">
          <h3>文章标题</h3>
          <el-input type="text" v-model="form.title" placeholder="请输入文章标题" style="width: 100%"/>
        </div>
        <div class="add-article-item">
          <h3>文章封面</h3>
          <el-upload
              class="upload-demo"
              drag
              :action="uploadUrl"
              :on-success="handleSuccess"
              :on-error="handleError"
              :show-file-list="false"
          >
            <el-icon class="el-icon--upload">
              <upload-filled/>
            </el-icon>
            <div class="el-upload__text">
              将文件拖放到此处或<em>单击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                图片大小小于 5MB 的 JPG/PNG 文件
              </div>
            </template>
          </el-upload>
          <div class="image-preview" v-if="form.imageUrl">
            <img :src="form.imageUrl" alt="图片预览" style="width: 100%"/>
          </div>
        </div>
        <div class="add-article-item">
          <h3>文章简介</h3>
          <el-input type="textarea" v-model="form.description" placeholder="请输入文章简介" :rows="4"
                    style="width: 100%"/>
        </div>
        <div class="add-article-item">
          <el-row :gutter="20">
            <el-col :span="12">
              <h3>文章板块</h3>
              <el-select v-model="form.bankuai" placeholder="请选择文章板块">
                <el-option label="美食乐园" value="美食乐园"></el-option>
                <el-option label="饮食健康" value="饮食健康"></el-option>
                <el-option label="烹饪技巧" value="烹饪技巧"></el-option>
              </el-select>
            </el-col>
            <el-col :span="12" v-if="form.bankuai === '美食乐园'">
              <h3>文章分类</h3>
              <el-select v-model="form.type" placeholder="请选择文章分类">
                <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </div>
        <div class="add-article-item">
          <h3>文章内容</h3>
          <WangEditorView v-model="form.content"/>
        </div>
        <div class="add-article-item" style="margin-top: 40px">
          <el-button type="primary" @click="handleSubmit" style="width: 100%">发布文章</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.add-article {
  width: 100%;
}



</style>
